<template>
  <div class="weibo-card" v-if="postData">
    <div class="weibo-card__header">
      <img :src="postData.avatar" alt="avatar" class="weibo-card__avatar" />
      <div class="weibo-card__info">
        <span class="weibo-card__nickname">{{ postData.userId }}</span>
        <span class="weibo-card__meta">{{ postData.time }} 来自 微博网页版</span>
      </div>
    </div>

    <div class="weibo-card__content">
      {{ postData.text }}
      <div class="weibo-card__image" v-if="postData.url">
        <img :src="postData.url" alt="weibo-img" />
      </div>
    </div>

    <div class="weibo-card__actions">
      <span class="weibo-card__action">
        <el-icon><ChatDotRound /></el-icon>{{ postData.commentCount || 0 }}
      </span>
      <span class="weibo-card__action">
        <el-icon><StarFilled /></el-icon>{{ postData.likeCount || 0 }}
      </span>
      <span class="weibo-card__action">
        <el-icon><Share /></el-icon>{{ postData.forwardCount || 0 }}
      </span>
      <span class="weibo-card__action">
        <el-icon><View /></el-icon>{{ postData.browse || 0 }}
      </span>
    </div>
  </div>

  <div v-else>加载中...</div>
</template>


<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted } from 'vue';
// 引入 Element Plus 图标，按需添加
import { ChatDotRound, StarFilled, Share } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router'
const post = ref({
  id: '',
  userId: '',
  title:'',
  time: '',
  text: '',
  url: '',
  browse:'0',
  // 可扩展其他字段，如头像、评论数等
  avatar: '/src/assets/t1.png', // 默认头像示例
  commentCount: 0,
  likeCount: 0,
  forwardCount: 0,
});
const route = useRoute()
const id = route.query.id
const tableData = ref();
const postData = ref(null)

onMounted(() => {
  doList();
});

const doList = async () => {
  const { data } = await axios.get('/api/poster/'+id);
  postData.value = data;
};
</script>

<style scoped>
.weibo-card {
  display: flex;
  height: auto;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.weibo-card__header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.weibo-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 8px;
}
.weibo-card__info {
  display: flex;
  flex-direction: column;
}
.weibo-card__nickname {
  font-weight: bold;
  color: #333;
}
.weibo-card__meta {
  font-size: 12px;
  color: #999;
}
.weibo-card__content {
  margin: 8px 0;
  text-align: center;
  color: #333;
  line-height: 1.6;
}
.weibo-card__image {
  margin-top: 8px;
}
.weibo-card__image img {
  max-width: 200px;
  border-radius: 4px;
}
.weibo-card__actions {
  display: flex;
  gap: 24px;
  color: #666;
  margin-top: 8px;
  cursor: pointer;
}
.weibo-card__action {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.weibo-card__action:hover {
  color: #409eff;
}
</style>